<template>
	<div style="z-index: 1002;position: relative;">
		<el-dialog v-model="rightDrawerVisible" :show-close="true" width="1500px" destroy-on-close>
			<!-- 审批表单头部 -->
			<template #header="{ close, titleId, titleClass }">
				<el-card style="margin-bottom: 20px">
					<header-u-i ref="headerUIRef"></header-u-i>
				</el-card>
			</template>

			<!-- 审批表单主体 -->
			<el-row>
				<el-col :span="19">
					<!-- 审批表单参数 -->
					<el-scrollbar style="padding-right: 0px;height: 60vh">
						<div style="height: 50vh">
							<template v-if="selectStartDept && startUserDeptList.length > 1">
								<h4>请选择您当前所在部门</h4>
								<el-select @change="startUserMainDeptChangeEvent" v-model="startUserMainDeptId"
									placeholder="请选择您当前所在部门" style="width: 100%">
									<el-option v-for="item in startUserDeptList" :key="item.id" :label="item.name"
										:value="item.id" />
								</el-select>
								<el-divider></el-divider>
							</template>
							<!-- 弹窗最外层1 -->
							<form-u-i @formValueChange="formValueChange" ref="formUIRef"></form-u-i>
						</div>
					</el-scrollbar>
					<!-- 审批操作按钮组 -->
					<div style="display: flex;justify-content: space-between">
						<div>
							<oper-u-i ref="operUIRef" @taskSubmitEvent="taskSubmitEvent" @validateForm="validateForm"
								:flow-id="flowId" :task-id="taskId" :process-instance-id="processInstanceId"></oper-u-i>
						</div>
					</div>
				</el-col>
				<!-- 审批右侧 流程轨迹 -->
				<el-col :span="5" style="position: relative;z-index: 0;">
					<el-scrollbar height="55vh">
						<flow-node-format ref="flowNodeFormatRef"></flow-node-format>
					</el-scrollbar>
				</el-col>
			</el-row>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
// TODO: 工作流审批-主体页面
import { ref, onMounted } from "vue";
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import * as util from "../../../utils/objutil";
import { queryHeaderShow } from "../../../api/base";
import { getFormDetail } from '../../../api/form'

// 审批轨迹
import FlowNodeFormat from "../../flow/FlowNodeFormatData.vue";
// 审批表单
import FormUI from "./formUIPc.vue";
// 审批头部
import HeaderUI from "../show/header.vue";
// 审批按钮
import OperUI from "../show/oper.vue";
const dialogKey = ref(0)
const rightDrawerVisible = ref(false)
const headerUIRef = ref();
const flowNodeFormatRef = ref();
const operUIRef = ref();
const flowId = ref('');
const formUIRef = ref();
const taskId = ref('');
const copyId = ref();
const processInstanceId = ref('');
//发起人的部门
const startUserDeptList = ref([]);
//发起的主部门id
const startUserMainDeptId = ref();
//是否需要选择发起人部门
const selectStartDept = ref(false);

// 点击开始处理
const deal = (tId, pId, fId, ccId, nId) => {
	dialogKey.value += 1
	taskId.value = tId
	flowId.value = fId
	processInstanceId.value = pId
	copyId.value = ccId

	queryHeaderShow({
		processInstanceId: pId,
		taskId: tId,
		flowId: fId,
		ccId: ccId
	}).then(res => {
		headerUIRef.value.loadData(res.data);
	});

	getFormDetail({
		flowId: fId,
		processInstanceId: pId,
		taskId: tId,
		ccId: ccId
	}).then(res => {
		let data = res.data;
		startUserDeptList.value = data.startUserDeptList
		selectStartDept.value = data.selectStartDept;
		if (data.selectStartDept) {//是否发起人需要选择部门
			startUserMainDeptId.value = data.startUserDeptList[0].id
		}

		formUIRef.value.loadData(data.formList, fId, nId, pId, tId, ccId, data.dynamic, data.formChangeRecord)
		operUIRef.value.handle(tId);
	})
	rightDrawerVisible.value = true;
}
const emit = defineEmits(["taskSubmitEvent"]);
const taskSubmitEvent = () => {
	rightDrawerVisible.value = false;
	emit('taskSubmitEvent')
}

//验证表单
function validateForm(op, f) {
	let validate = flowNodeFormatRef.value.validate(op);
	if (!validate) {
		f(false)
		return
	}
	let param = flowNodeFormatRef.value.formatSelectNodeUser();

	formUIRef.value.validate(function (a, b) {
		if (param) {
			f(a, { ...b, ...param });
		} else {
			f(a, b);
		}
	})
}

const formValueChange = (v) => {
	v['startUserMainDeptId'] = startUserMainDeptId.value;
	flowNodeFormatRef.value.queryData(v, flowId.value, processInstanceId.value, taskId.value)
}

//发起人主部门id变化了
function startUserMainDeptChangeEvent(e) {
	let formValue = formUIRef.value.getFormValue();
	formValue['startUserMainDeptId'] = e;
	flowNodeFormatRef.value.queryData(formValue, flowId.value, processInstanceId.value, taskId.value, 'start')
}

defineExpose({ deal });
onMounted(() => {});
</script>

<style scoped lang="less"></style>
